<template>
  <div class="container">
    <div class="container-head flex_btw">
      <div class="head-title flex_x">
        <img class="head-icon" src="@/assets/images/data.png" alt="" />
        <span>预警管理</span>
      </div>
      <div class="flex_x search_box">
        <el-form :inline="true" :model="params">
          <el-form-item label="维度值">
            <el-select
              v-model="params.region"
              placeholder="Activity zone"
              clearable
              style="width: 230px;"
            >
            <el-option label="A品牌2天不开单店铺预警" value="" />
              <el-option label="否" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否生成任务">
            <el-select
              v-model="params.region"
              placeholder="Activity zone"
              clearable
            >
              <el-option label="是" value="" />
              <el-option label="否" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="预警状态">
            <el-select
              v-model="params.region"
              placeholder="Activity zone"
              clearable
            >
            <el-option label="无" value="" />
              <el-option label="否" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="严重程度">
            <el-select
              v-model="params.region"
              placeholder="Activity zone"
              clearable
            >
            <el-option label="警告" value="" />
              <el-option label="否" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select
              v-model="params.region"
              placeholder="Activity zone"
              clearable
            >
            <el-option label="无" value="" />
              <el-option label="否" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button type="primary" @click="
            router.push({
              name: 'taskMerge',
            })
          ">合并任务</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="list_con">
      <div class="flex list_data">
        <div class="table-collapse">
          <el-tree
            ref="treeRef"
            style="max-width: 600px"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          />
        </div>
        <el-table
          :data="tableData"
          v-resize="{ bottomOffset: 120 }"
          ref="tableRef"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="100" />
          <el-table-column prop="name" label="名称" width="200"> </el-table-column>
          <el-table-column prop="wd" label="维度值"> </el-table-column>
          <el-table-column prop="zb" label="指标数据"> </el-table-column>
          <el-table-column prop="date" label="预警时间"> </el-table-column>
          <el-table-column prop="yjzt" label="预警状态"> </el-table-column>
          <el-table-column prop="cd" label="严重程度"> </el-table-column>
          <el-table-column prop="rwzt" label="任务状态"> </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="primary" link>查看</el-button>
              <el-button type="primary" link v-if="scope.row.rwzt === '无'">生成任务</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="list_page flex_c">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[100, 200, 300, 400]"
          background="rgba(33,99,230,0.2)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

interface User {
  date: string;
  name: string;
  address: string;
}

const router = useRouter();
const currentPage = ref(4);
const pageSize = ref(100);

const params = ref({
  user:'',
  region:'',
  a:'',
});
const tableData: User[] = [
  {
    name: "A品牌2天不开单店铺预警",
    wd: "A品牌华阳店",
    zb: "0",
    date: "2024-1-9 02 :00",
    yjzt: "无",
    cd: "严重",
    rwzt: "无",
  },
  {
    name: "A品牌2天不开单店铺预警",
    wd: "A品牌华阳店",
    zb: "0",
    date: "2024-1-8 02 :00",
    yjzt: "无",
    cd: "严重",
    rwzt: "无",
  },
  {
    name: "A品牌2天不开单店铺预警",
    wd: "A品牌春熙店",
    zb: "0",
    date: "2024-1-7 02 :00",
    yjzt: "单条手动生成",
    cd: "警告",
    rwzt: "处理中",
  },
  {
    name: "B品牌2天不开单店铺预警",
    wd: "B品牌春熙店",
    zb: "0",
    date: "2024-1-6 02 :00",
    yjzt: "1次后已自动生成",
    cd: "警告",
    rwzt: "已完成",
  },
  {
    name: "达成率低于时间进度10%",
    wd: "春熙店",
    zb: "达成率50% 时间进度90%",
    date: "2024-1-5 02 :00",
    yjzt: "2次后已自动生成",
    cd: "警告",
    rwzt: "临期",
  },
  {
    name: "A品牌2天不开单店铺预警",
    wd: "A品牌温江店",
    zb: "0",
    date: "2024-1-4 02 :00",
    yjzt: "多条手动生成",
    cd: "严重",
    rwzt: "超期",
  },
  {
    name: "A品牌2天不开单店铺预警",
    wd: "A品牌温江店",
    zb: "0",
    date: "2024-1-3 02 :00",
    yjzt: "多条手动生成",
    cd: "严重",
    rwzt: "超期",
  },
];
const data: Tree[] = [
  {
    id: 1,
    label: "A品牌2天不开单店铺预警",
  },
  {
    id: 2,
    label: "b品牌2天不开单店铺预警",
  },
  {
    id: 3,
    label: "c品牌2天不开单店铺预警",
  },
];
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "A品牌2天不开单店铺预警",
  },
];
interface Tree {
  [key: string]: any;
}

const filterText = ref("");
const treeRef = ref(null);

const defaultProps = {
  children: "children",
  label: "label",
};

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};
const activeNames = ref(["1"]);
const handleChange = (val: string[]) => {
  console.log(val);
};
const multipleTableRef = ref();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>
